<template>
  <div class="svg-content" id="view">
    <svg :width="width" :height="height" id="svgFlow">
      <g></g>
      <rect />
    </svg>
  </div>
</template>
<script>
import work from "@/api/workManagement/index";
import dagreD3 from "dagre-d3";
import * as d3 from "d3";
import eventBus from "@/utils/eventBus";
export default {
  props: {
    id: {
      type: [Number,String],
      default:""
    },
  },
  mounted() {
    this.getRealOffset()
    this.simpleDescription();
  },
  data() {
    return {
      processInfo: {},
      width:600,
      height:700
    };
  },
  watch:{
    current_state_id(v){
      if(v){
        this.getRealOffset()
        this.simpleDescription();
      }
    }
  },
  computed:{
    current_state_id(){
      return this.$store.getters.current_state_id
    },
  },
  created() {
    this.refreshData();
  },
  methods: {
    getRealOffset(){
      var o = document.getElementById("view");
      this.width = o.offsetWidth-10
      this.height = o.offsetHeight
    },
    refreshData() {
      eventBus.$on("submitWork", () => {
        this.simpleDescription();
      });
    },
    simpleDescription() {
      work.simpleDescription(this.id).then(res => {
          this.processInfo = res.data;
          this.showDagreD3();
      });
    },
    showDagreD3() {
      //获取D3
      var g = new dagreD3.graphlib.Graph().setGraph({
        marginx: 10,
        marginy: 5,
      });
      //console.log(g);
      // 添加节点
      this.processInfo.workflow_state_info.forEach((item, index) => {
        let type =
          index == 0 || index == this.processInfo.workflow_state_info.length - 1
            ? "circle"
            : "rect";
        let node = {
          id: item.id,
          label: item.name,
          shape: type,
          style: this.getStyle(item.id),
          rx: 5,
          ry: 5
        };
        g.setNode(item.id, node);
      });
      // 链接关系
      this.processInfo.workflow_transition_info.forEach(item => {
        g.setEdge(item.source_state_id, item.destination_state_id, {
          label: item.name,
          ...this.getEdgeStyle(item.attribute_type_id)
        });
      });

      //绘制图形
      var svg = d3.select("#svgFlow"),
        inner = svg.select("g");
      var render = new dagreD3.render();
      //   debugger
      render(inner, g);
      let _graphWidth = g.graph().width
      var xCenterOffset = _graphWidth>400?10:(svg.attr("width") - _graphWidth) / 2;
      inner.attr("transform", "translate(" + xCenterOffset + ", 20)");
      if(this.width<_graphWidth){
        svg.attr("width",_graphWidth+10)
      }
      svg.attr("height", g.graph().height + 20);
    },
    getStyle(id) {
      let style = "";
      if (id === this.current_state_id) {
        style = "stroke: #3d46dc; stroke-width: 1px;fill:#9e9bdf;";
      } else {
        style = "stroke:grey; stroke-width: 1px;fill:rgb(246, 247, 255);";
      }
      return style;
    },
    getEdgeStyle(type) {
      if (type == 1) {
        //是否是选中的，选中的给特殊颜色
        return {
          style: "stroke: grey; fill: none;", //线条颜色
          arrowheadStyle: "fill: grey;stroke: grey;" //箭头颜色
        };
      } else if (type == 2) {
        //是否是选中的，选中的给特殊颜色
        return {
          style: "stroke: #999; fill: none;", //线条颜色
          arrowheadStyle: "fill: #999;stroke: #999" //箭头颜色
        };
      }
      else if (type == 3) {
        //是否是选中的，选中的给特殊颜色
        return {
          style: "stroke: #dfe6ec; fill: none;", //线条颜色
          arrowheadStyle: "fill: #dfe6ec;stroke: #dfe6ec" //箭头颜色
        };
      }else {
        return {
          style: "stroke: #9e9e9e; fill: none;", //线条颜色
          arrowheadStyle: "fill: #9e9e9e;stroke: #9e9e9e" //箭头颜色
        };
      }
    }
  }
};
</script>
<style scoped>
.svg-content {
  clear: both;
  height: calc(100vh - 235px);
  overflow: scroll;
}

svg {
  font-size: 14px;
}
::v-deep .node rect {
  stroke: #606266;
  fill: #fff;
}
::v-deep.edgeLabel {
  font-size: 10px;
}
::v-deep .edgePath path {
  stroke: #808080;
  fill: currentColor;
  stroke-width: 1.5px;
}
</style>
